import React,{Component}  from 'react'
import style from './index.less'
import moment from 'moment'
import {MyCharts} from '../../components'
import echarts from 'echarts'

const ProfitCharts =({data,benchName,product})=>{

  const profitChartsX=data.map((item,i)=>item.date.replace(/-/g,'/'))
  const profitChartsData=[
    {
      name:benchName,//'基准',
      data:data.map((item,i)=>item.benchmarkReturnRate)
    },
    {
      name:product.value.split('：')[0],//'组合',
      data:data.map((item,i)=>item.returnRate)
    },
    {
      name:'超额',
      type:'area',
      data:data.map((item,i)=>item.additionalReturnRate)
    }
  ]

  const profitCharts={
    charts:{
      option:{
        color: [
          '#fd345e', '#f1a126', '#3084c1'
        ],
        tooltip: {
          trigger: 'axis',
          formatter: '{a0}：{c0}%<br/>{a1}：{c1}%<br/>{a2}：{c2}%'
        },
        legend: {
          // orient: 'vertical',
          right: '5%',
          top: '4%',
          data: profitChartsData.map((item, i) => ({name: item.name, icon: 'circle'})),
          itemWidth: 6,
          itemHeight: 6
        },
        grid: {
          left: '5%',
          right: '5%',
          bottom: '5%',
          top: "20%",
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: profitChartsX,
          axisTick: {
            alignWithLabel: true,
            show:false
          },
          axisLine:{
            show:false
          },
          axisLabel: {
            color:'#555'
            }
          //   axisLabel: {
          //      interval: 0,
          //      rotate: 30
          //  },
        },
        yAxis: {
          type: 'value',
          name : '收益率(%)',
          // min: function(value) {
          //     return  value.min
          // },
          // max: function(value) {
          //     return value.max
          // },
          axisTick: {
            alignWithLabel: true,
            show:false
          },
          axisLine:{
            show:false
          },
          axisLabel: {
            color:'#797979'
            }
        },
        series: profitChartsData.map((item, i) => {
          if (item.type == 'area') {
            return ({
              name: item.name,
              type: 'line',
              symbol: "none",
              data: item.data,
              lineStyle: {
                normal: {
                  width: 0
                }
              },
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: '#488EC7'
                    }, {
                      offset: 1,
                      color: '#4FB0D1'
                    }
                  ])
                }
              }
            })
          } else {
            return ({
              name: item.name,
              type: 'line',
              symbol: "none",
              data: item.data,
              lineStyle: {
                normal: {
                  width: 1
                }
              }
            })
          }
        })
      }
    },
    collapsed:localStorage.htSiderFold,
    width:'100%',
    height:160
  }
  return (
      <div className={`${style.root}`} id='profitCharts'>
        <MyCharts {...profitCharts}/>
      </div>
    )
}


ProfitCharts.propTypes={

}

export default ProfitCharts
